<%-- 
    Document   : CON_VISTA_MONEDA
    Created on : 07-nov-2014, 12:13:21
    Author     : equipo_4
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../js/amcharts/amcharts.js" type="text/javascript"></script>
        <script src="../js/amcharts/serial.js" type="text/javascript"></script>
        <script src="../login/js/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
           var chart;
           var chartData = [];
           var monedas = [];
           var firstDate = new Date();
           AmCharts.ready(function () {
               
               $.post("../CON_MONEDA_CONTROLLER",{proceso:"listamonedas"},function(responsetext){
                   monedas = $.parseJSON(responsetext);
                   generateChartData();     
                });           
           });
           
           function init()
           {
               
                // generate some random data first               

               // SERIAL CHART
               chart = new AmCharts.AmSerialChart();
               chart.pathToImages = "../js/amcharts/images/";
               chart.dataProvider = chartData;
               chart.categoryField = "date";

               // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
               chart.addListener("dataUpdated", zoomChart);
               
               // AXES
               // category
               var categoryAxis = chart.categoryAxis;
               categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
               categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
               categoryAxis.minorGridEnabled = true;
               categoryAxis.axisColor = "#DADADA";
               categoryAxis.twoLineMode = true;
               categoryAxis.dateFormats = [{
                    period: 'fff',
                    format: 'JJ:NN:SS'
                }, {
                    period: 'ss',
                    format: 'JJ:NN:SS'
                }, {
                    period: 'mm',
                    format: 'JJ:NN'
                }, {
                    period: 'hh',
                    format: 'JJ:NN'
                }, {
                    period: 'DD',
                    format: 'DD'
                }, {
                    period: 'WW',
                    format: 'DD'
                }, {
                    period: 'MM',
                    format: 'MMM'
                }, {
                    period: 'YYYY',
                    format: 'YYYY'
                }];

               // first value axis (on the left)
               var valueAxis1 = new AmCharts.ValueAxis();
               valueAxis1.axisColor = "#FF6600";
               //valueAxis1.offset = 50;
               valueAxis1.axisThickness = 2;
               valueAxis1.gridAlpha = 0;
               chart.addValueAxis(valueAxis1);
              
               // GRAPHS
               // first graph
               
               for(var i =0; i<monedas.length; i++)
               {
                    var graph1 = new AmCharts.AmGraph();
                    graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used
                    graph1.title = monedas[i];
                    graph1.valueField = monedas[i];
                    graph1.bullet = "round";
                    graph1.hideBulletsCount = 30;
                    graph1.bulletBorderThickness = 1;
                    chart.addGraph(graph1);
               }               
               
               
               var chartCursor = new AmCharts.ChartCursor();
               chartCursor.cursorAlpha = 0.1;
               chartCursor.fullWidth = true;
               chart.addChartCursor(chartCursor);

               // SCROLLBAR
      
                var chartScrollbar = new AmCharts.ChartScrollbar();
               chart.addChartScrollbar(chartScrollbar);
               // LEGEND
               var legend = new AmCharts.AmLegend();
               legend.marginLeft = 110;
               legend.useGraphSettings = true;
               chart.addLegend(legend);

               // WRITE
               chart.write("chartdiv");        
           }

           // generate some random data, quite different range
           function generateChartData() {
               
               $.post("../CON_MONEDA_CONTROLLER",{proceso:"listafechas"},function (data){
                    var fechas = data.split(",");  
                    
                    firstDate = new Date(fechas[0]); //Fecha inicial del grafico
                                                                          
                    $.post("../CON_MONEDA_CONTROLLER",{proceso:"listamonedasxfechas",fecha:data}, function (responsetext){
                        chartData = $.parseJSON(responsetext);
                        init();
                    });
               });                              
           }

           // this method is called when chart is first inited as we listen for "dataUpdated" event
           function zoomChart() {
               // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
               chart.zoomToIndexes(1, 20);
           }
        </script>
    </head>

    <body>
        <div id="chartdiv" style="width: 100%; height: 400px;"></div>
    </body>
    <footer>
            <a href="#" id="Atras"><img src="../img/iconos/imprimir.png" /><br/>
                IMPRIMIR
            </a>
            <a href="#" id="Atras"><img src="../img/iconos/pdf.png" /><br/>
                EXPORTAR PDF
            </a>
            <a href="#" id="Atras"><img src="../img/iconos/excel.png" /><br/>
                EXPORTAR EXCEL
            </a>
    </footer>
</html>
